<template>
  <div class="bg-gray-100 rounded-lg shadow-md p-6">
    <h2 class="text-xl font-semibold text-gray-800 mb-4">👶 子组件</h2>
    <div class="space-y-3">
      <p class="text-gray-600">
        通过 inject 接收到的用户对象：
        <span class="font-semibold text-blue-600">
          {{ user ? JSON.stringify(user) : 'null' }}
        </span>
      </p>
      <div class="text-sm text-gray-500 bg-white p-3 rounded border-l-4 border-red-400">
        <strong>说明：</strong> 子组件使用 inject('user') 接收父组件提供的数据。
        即使父组件在异步回调中重新调用了 provide()，子组件也不会收到更新，
        因为 provide/inject 的依赖关系只能在组件初始化时建立。
      </div>
      <div class="text-xs text-red-600 bg-red-50 p-2 rounded">
        ⚠️ 注意：这个值将始终保持为初始的 null，不会因为异步操作而改变
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'

// 从父组件注入用户对象
const user = inject<{ name: string } | null>('user')

console.log('子组件接收到的 user:', user)
</script>